<template>
  <div class="fns-login">
  <div class="login-container">
    <div class="log">
    <img src="../../assets/images/logo.png" alt="" width="100%">
    </div>
    <el-form class="login-form" @submit.native.prevent  autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" @keyup.enter.native="handleLogin" :status-icon="true">
    <el-form-item prop="username">
      <el-row class="userName item" >
      <el-col>
        <el-input name="username" type="text" v-model.trim="loginForm.username" @focus='inputFocus("name")' @blur='inputBlur("name")'
            autoComplete="on" placeholder="请输入用户名" ></el-input>
        <span class="svg-user">
        <i :class="fontColor.name ? 'fontColor' : ''" class="iconfont icon-user" ></i>
         </span>
      </el-col>
      </el-row>
    </el-form-item>

    <el-form-item prop="password">
      <el-row class="psd item">
      <el-col>
        <el-input name="password" type="password"  @focus='inputFocus("pwd")' @blur='inputBlur("pwd")'
            v-model="loginForm.password" autoComplete="on" placeholder="请输入密码"   @keyup.enter.native="handleLogin" :maxlength="16"></el-input>
        <span class="svg-user">
         <i :class="fontColor.pwd ? 'fontColor' : ''" class="iconfont icon-mima"></i>
         </span>
      </el-col>
      </el-row>
    </el-form-item>

    <el-form-item prop="code" class="verify-form">
      <el-row class="psd item">
      <el-col>
        <Verify v-loading="loading2"  element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" ref="verify" @request='ready' :type="4" :position='positionH' :imgSize="{width:'298px',height:'68px'}" :imgUrlMove='imgUrlMove' :imgUrl="imgUrl"  :blockSize="{width:'24px',height:'24px'}" :barSize="{width:'298px',height:'24px'}" ></Verify>
      </el-col>
      </el-row>
    </el-form-item>

    <el-row class="btn">
      <el-col>
      <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
        登 录
      </el-button>
      </el-col>
    </el-row>

    </el-form>
  </div>
  </div>
</template>

<script>
import * as validate from '@/utils/validate'
// import Verify from 'vue2-verify'
import Verify from '@/components/vue2-verify'
import * as api from '@/api/login'
export default {
name: 'login',
data() {
  const validateUsername = (rule, value, callback) => {
    if (!isvalidUsername(value)) {
      callback(new Error('请输入正确的用户名'))
    } else {
      callback()
    }
  }
  const validatePass = (rule, value, callback) => {
    if (value.length < 6) {
      callback(new Error('密码不能小于6位'))
    } else {
      callback()
    }
  }
  return {
    loading2: false,
    verifyInstance: '',
    isVerify: false,
    imgUrlMove: '',
    imgUrl: '',
    positionH: [10],
    loginForm: {
      username: '',
      password: '',
      identificationCode: ''
  // code: ''
    },
    loginRules: {
      username: [validate.blur('用户名不能为空!')],
      password: [validate.blur('密码不能为空!'), validate.psd ]
  // code: [validate.blur('验证码不能为空')]
    },
    fontColor: {
      name: false,
      pwd: false,
      code: false
      },
      loading: false,
      pwdType: 'password',
      identificationCode: ''
    }
  },
  created() {
  // this.init()
  },
  methods: {
    // 获取图片信息
  init() {
    this.loading2 = true
    api.getIdentifyImg().then((res) => {
      if(+res.code === 0) {
        var url = 'data:image/jpeg;base64,'
        // this.imgUrl = res.data.resultBinary
        this.imgUrl = '';
        this.imgUrl = url + res.data.resultBinary
        this.positionH = [res.data.height]

        this.imgUrlMove = url + res.data.cutImgBinary
        this.identificationCode = res.data.identificationCode
        this.loading2 = false
      }
    })
  },
  // 错误时 刷新
  refresh(e) {
    e.showRefresh = true
    e.text = ''

    e.transitionLeft = 'left .3s'
    e.moveBlockLeft = 0

    e.leftBarWidth = undefined
    e.transitionWidth = 'width .3s'

    e.leftBarBorderColor = '#ddd'
    e.moveBlockBackgroundColor = '#fff'
    e.iconColor = '#000'
    e.iconClass = 'icon-right'

    e.isEnd = false

    setTimeout(() => {
    e.transitionWidth = ''
    e.transitionLeft = ''
    e.text = e.explain
    }, 300)

    this.init()
  },
  // 请求验证
  ready(e, x) {
    var _this = this
    if (this.isVerify) return
    api.verifyCode({ identificationCode: this.identificationCode, xposition: x ? x.replace('px', '') : '' }).then((res) => {
    if(+res.code === 0) {
      e.moveBlockBackgroundColor = '#5cb85c'
      e.leftBarBorderColor = '#5cb85c'
      e.iconColor = '#fff'
      e.iconClass = 'icon-check'
      e.showRefresh = false
      e.isEnd = true;
      _this.fontColor.code = true
      this.isVerify = true
      this.verifyInstance = e
      this.handleLogin()  // 认证成功后自动登录
    } else {
      e.moveBlockBackgroundColor = '#F56C6C'
      e.leftBarBorderColor = '#F56C6C'
      e.iconColor = '#fff'
      e.iconClass = 'icon-close'

      setTimeout(function () {
      _this.refresh(e)
      }, 200);

      _this.fontColor.code = false
      this.isVerify = false
    }
    }).catch(() => {
    e.moveBlockBackgroundColor = '#F56C6C'
    e.leftBarBorderColor = '#F56C6C'
    e.iconColor = '#fff'
    e.iconClass = 'icon-close'

    setTimeout(function () {
      _this.refresh(e)
    }, 200);
    this.isVerify = false
    })
  },
  showPwd() {
    if (this.pwdType === 'password') {
      this.pwdType = ''
    } else {
      this.pwdType = 'password'
    }
  },
  refreshVerify() {
    this.refresh(this.verifyInstance)
    this.fontColor.code = false
    this.isVerify = false
  },
handleLogin() {
  this.$refs.loginForm.validate(valid => {
  if(this.fontColor.code === true) {
    if (valid) {
      this.loading = true
      this.loginForm.identificationCode = this.identificationCode
      this.$store.dispatch('Login', this.loginForm).then((res) => {
          this.$store.dispatch('GetSiderMenu').then(() => {
            this.loading = false
            this.$router.push({ path: '/' })
            this.$message ({
              message: res,
              type: 'success',
              duration: 2 * 1000
             })                 
          }).catch((err) => {
          this.loading = false
          this.refreshVerify()
        })
      }).catch((err) => {
        if (+err.code === 1001) {
            this.$message ({
              message: '用户名或密码错误',
              type: 'error',
              duration: 2 * 1000
             }) 
          } else if (+err.code === 1011) {
            this.$message ({
              message: '此账号已停用，请联系管理员',
              type: 'error',
              duration: 2 * 1000
             }) 
          }
        this.loading = false
        this.refreshVerify()
      })
      } else {
      console.log('error submit!!')
      return false
      }
    } else {
      this.$message ({
      message: '请完成验证',
      type: 'warning',
      duration: 2 * 1000
      })
    }
    })
  },
  inputFocus(color) {
    this.fontColor[color] = true
  },
  inputBlur(color) {
    this.fontColor[color] = false
  }
  },
  components: {
    Verify
  }
}
</script>

<style lang="scss">
.fns-login {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: url(../../assets/images/login.jpg) center no-repeat;
  background-size: 100% 100%;
  .fontColor {
  color: #5B97FA!important;
  }
  .login-container {
    position: relative;
    width: 300px;
    top: 54.5%;
    margin-top: 230px;
    margin: -235px auto 0;
    .verify-btn {
      display: none;
    }
    .log {
      width: 100%;
      height: 120px;
    }
    .login-form {
      // padding: 30px 75px 46px;
      // background: #fff;
      border-radius: 0 0 6px 6px;
      .verify-form {
        border-bottom: none !important;
      }
      .el-form-item {
      position: relative;
      margin-bottom: 20px;
      .el-form-item__content {
        line-height: 30px;
        .el-form-item__error {
        right: 0;
        left: inherit;
        }
      }
      .item {
        .svg-user {
        display: inline-block;
        position: absolute;
        left: 5px;
        top: 0;
        .iconfont {
          color: #333;
        }
        }
        .el-input {
        .el-input__inner {
          height: 30px;
          line-height: 30px;
          border: none;
          // border-bottom: 1px solid #DCDCDC;
          padding-left: 30px !important;
          &:-webkit-autofill {
          -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
          -webkit-text-fill-color: #333 !important;
          }
        }
        }
        .code {
        min-width: 70px;
        height: 26px;
        border:1px solid #DCDCDC;
        display: inline-block;
        position: absolute;
        right: 0;
        top: 0;
        color: #ccc;
        }
      }
      }
      .btn {
        margin-top: 23px;
        .el-button {
          height: 42px;
          // border-radius: 21px;
          font-size: 18px;
          box-shadow:10px 0 7px rgba(18, 46, 106, 0.22);
          background: #1A5CE1;
          border-color: #1A5CE1;
          letter-spacing: 5px;
          &:hover {
          background: #5B97FA;
          border-color: #5B97FA;
          }
        }
      }
    }
    .verify-bar-area .verify-left-bar {
      border-radius: 4px;
    }
  }
}
</style>
